<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            :headerTitle="headerTitle"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用筛选栏 -->
        <!-- <nav-box @changeNav="changeNav"></nav-box> -->
        <!-- 共用筛选栏 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="goodsList"
            @pullup="loadMore"
        >

            <img
                class="goods-type-img"
                :src="goodsTypeImg"
            />
            <!-- <div class="goods-intro-box">
                <div class="goods-intro-title">
                    <img
                        class="goods-intro-img"
                        src="@/assets/images/home/goods-type-title.png"
                    />
                </div>
                <div class="goods-intro-list">
                    <div class="goods-intro-item">
                        <div class="goods-img-box">
                            <img src="@/assets/images/home/goods-list-img.png" />
                        </div>
                        <div class="goods-info">
                            <div class="goods-name">蕊珂 天然鱼胶原紧致眼霜</div>
                            <div class="goods-detail">富含深海鱼胶原蛋白保湿因子，淡化黑眼圈，改善眼周肌肤</div>
                            <div class="goods-market-price">零售价：￥699</div>
                            <div class="goods-other-info">
                                <div class="goods-normal-price">会员价：￥50</div>
                                <img
                                    class="get-methods-name"
                                    src="@/assets/images/home/free-get-icon.png"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="goods-intro-item">
                        <div class="goods-img-box">
                            <img src="@/assets/images/home/goods-list-img.png" />
                        </div>
                        <div class="goods-info">
                            <div class="goods-name">蕊珂 天然鱼胶原紧致眼霜</div>
                            <div class="goods-detail">富含深海鱼胶原蛋白保湿因子，淡化黑眼圈，改善眼周肌肤</div>
                            <div class="goods-market-price">零售价：￥699</div>
                            <div class="goods-other-info">
                                <div class="goods-normal-price">会员价：￥50</div>
                                <img
                                    class="get-methods-name"
                                    src="@/assets/images/home/free-get-icon.png"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- 商品二级分类 -->
            <swiper
                :options="swiperOption"
                ref="mySwiper"
                class="goods-type-list"
            >
                <swiper-slide
                    class="swiper-slide"
                    v-for="(item,index) of goodsNavList"
                    :key="index"
                    :class="navSelect == index? 'active':''"
                    @click.native="selectNav(index,item.id)"
                >
                    {{item.name}}
                </swiper-slide>
            </swiper>
            <!-- 商品二级分类 -->

            <!-- 共用商品列表组件 -->
            <common-good-list
                :goodsList="goodsList"
                :goodsType="0"
                :emptyTips="emptyTips"
                style="padding-top:.35rem"
            >
            </common-good-list>
            <!-- 共用商品列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import NavBox from '@/components/NavBox'
import CommonGoodList from '@/components/GoodList'
export default {
    name: 'GoodsListNew',
    components: {
        CommonHeader,
        CommonScroll,
        NavBox,
        CommonGoodList
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0',
            },
            swiperOption: {
                slidesPerView: 'auto',
                spaceBetween: 20,
                threshold: 20,
                freeMode: true,
                observer: true
            },
            headerTitle: '',
            goodsTypeImg: '',
            navSelect: 0,
            goodsNavList: [{ name: '全部', id: this.$route.query.goodsType }],
            goodsList: [],
            emptyTips: '正在全力加载中...',
            sortType: '',
            nowType: this.$route.query.goodsType,
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            isAll: 1
        }
    },
    mounted() {
        this.getGoodsType()
        this.getGoodsNavList()
        this.getGoodsList()
    },
    methods: {
        getGoodsType() {
            let postData = this.qs.stringify({
                id: this.$route.query.goodsType
            })
            this.axios.post('/api/shelf/shelf_one.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.headerTitle = data.data.name
                    this.goodsTypeImg = data.data.imgs[0].title_img
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getGoodsNavList() {
            let postData = this.qs.stringify({
                parent_id: this.$route.query.goodsType,
                page_size: 999,
                page: 1
            })
            this.axios.post('/api/shelf/shelf.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.goodsNavList = this.goodsNavList.concat(data.data.list)
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getGoodsList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                shelf_id: this.nowType,
                all: this.isAll,
                page_size: 10,
                page: this.nowPage
            })
            this.axios
                .post('/api/shelf/shelf_goods.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无商品'
                        }
                        this.goodsList = this.goodsList.concat(data.data.list)
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getGoodsList()
            }
        },
        changeNav(id) {
            this.goodsList = []
            this.nowPage = 1
            this.totalPage = 1
            this.getGoodsList()
            switch (id) {
                case 0:
                    this.sortType = null
                    this.getGoodsList()
                    break
                case 1:
                    this.sortType = 'heat'
                    this.getGoodsList()
                    break
                case 2:
                    this.sortType = 'price'
                    this.getGoodsList()
                    break
            }
        },
        selectNav(index, id) {
            if (id == this.$route.query.goodsType) {
                this.isAll = 1
            } else {
                this.isAll = 0
            }
            this.navSelect = index
            this.emptyTips = '正在全力加载中...'
            this.nowType = id
            this.goodsList = []
            this.nowPage = 1
            this.totalPage = 1
            this.getGoodsList()
        }
    }
}
</script>

<style lang="stylus" scoped>
.goods-type-img
    width 100%
.goods-intro-title
    display flex
    align-items center
    justify-content center
    height 1.41rem
    .goods-intro-img
        height 0.5rem
.goods-intro-list
    padding 0 0.35rem
    .goods-intro-item
        display flex
        align-items center
        height 3.21rem
        padding 0 0.13rem
        border 1px solid #e5e5e5
        border-radius 5px
        box-sizing border-box
        margin-bottom 0.28rem
        .goods-img-box
            width 2.67rem
            height 2.67rem
            img
                width 2.67rem
                height 2.67rem
        .goods-info
            flex 1
            min-width 1px
            height 2.67rem
            padding 0.13rem 0.57rem
            box-sizing border-box
            .goods-name
                line-height 1
                font-size 0.37rem
                color #333
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .goods-detail
                margin-top 0.16rem
                line-height 1
                font-size 0.32rem
                color #666
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .goods-market-price
                margin-top 0.32rem
                line-height 1
                font-size 0.32rem
                color #999
                text-decoration line-through
            .goods-other-info
                margin-top 0.2rem
                display flex
                align-items center
                justify-content space-between
                .goods-normal-price
                    font-size 0.37rem
                    color #d7463c
                .get-methods-name
                    height 0.67rem
    .goods-intro-item:last-child
        margin-bottom 0
.goods-type-list
    display flex
    padding 0 0.54rem
    background #fff
    border-bottom 1px solid #e5e5e5
    .swiper-slide
        width auto
        padding 0.32rem 0.1rem
        font-size 0.38rem
        color #333
        box-sizing border-box
    .active
        color #4b866e
        border-bottom 2px solid #4b866e
</style>


